<template>
  <div class="search">
    <div v-for="(item,index) in search" class="searchItem">
      <div class="itemName">{{item.name}}：</div>
      <div v-if="item.type === 'input'">
        <a-input :placeholder="item.place" v-model="item.val" />
      </div>
      <div v-if="item.type === 'cascader'">
        <a-cascader style="width: 200px" :value="item.val" :options="item.selectData" :placeholder="item.place" @change="e=>{cascaderChange(e,index)}" />
      </div>
      <div v-if="item.type === 'select'">
        <a-select
          show-search
          placeholder="Select a person"
          option-filter-prop="children"
          style="width: 200px"
          :filter-option="filterOption"
          @change="e=>{selectChange(index,e)}"
          :value="item.val?item.val:undefined"
          :placeholder="item.place"
          allowClear
        >
          <a-select-option v-for="(demo,idx) in item.selectData" :value="demo[item.idKey]" :key="idx">
            {{demo[item.nameKey]}}
          </a-select-option>
        </a-select>
      </div>
      <div v-if="item.type === 'dateSelect'" style="display: flex">
        <a-range-picker style="width: 200px" @change="(date,dateString)=>{rangeChange(index,date,dateString)}" />
        <div class="dateSelect">
          <div @click="dateSelect(demo.id,index)" :class="demo.id === item.selectId?'active dateSelectItem':'dateSelectItem'" v-for="(demo,idx) in item.selectData" :key="idx">{{demo.name}}</div>
        </div>
      </div>
      <div v-if="item.type === 'date'">
        <a-range-picker style="width: 250px" @change="(date,dateString)=>{rangeChange(index,date,dateString)}" />
      </div>
    </div>
    <a-button  type="primary" style="width: 100px" @click="searchConfig">查询</a-button>
  </div>
</template>
<script>
  export default {
    name:'search',
    props:{
      search: Array
    },
    methods:{
      dateSelect(id,index){
        if(id === this.search[index].selectId){
          this.search[index].selectId = 0
        }else{
          this.search[index].selectId = id;
        }
      },
      cascaderChange(e,index){
        this.search[index].val = e;
      },
      rangeChange(index,date,dateString){
        this.search[index].val = dateString;
      },
      selectChange(index,idx){
        this.search[index].val = idx;
      },
      filterOption(input, option) {
        return (option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0);
      },
      searchConfig(){
        let config = JSON.parse(JSON.stringify(this.search));
        let configSearch = {};
        for(let i=0;i<config.length;i++){
          if(typeof config[i].key === 'object'){
            if(config[i].val.length>0){
              configSearch[config[i].key[0]] = config[i].val[0];
              configSearch[config[i].key[1]] = config[i].val[1]
            }
          }else{
            if(config[i].val) configSearch[config[i].key] = config[i].val
          }
          if(config[i].type === 'dateSelect'){
            configSearch.selectId = config[i].selectId
          }
        }
        this.$emit('searchVal',configSearch);
      }
    }
  }
</script>
